﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>常用工具后台</title>
    <link href="../assets/css/bootstrap.css" rel="stylesheet" />
    <!-- 字体图表-->
    <link href="../assets/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
     <!-- Morris Chart Styles-->
    <link href="../assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href="../assets/css/css1.css" rel='stylesheet' type='text/css' />
     <!-- TABLE STYLES-->
    <link href="../assets/css/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
    <link href="../assets/css/dataTables/jquery.dataTables.min.css" rel="stylesheet" />


</head>
<body>
    <div id="wrapper">
        <nav class="navbar navbar-default top-navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/admin"><i class="fa fa-user"></i> <strong> 小破站后台 </strong></a>
            </div>

            <ul class="nav navbar-top-links navbar-right">
                <!-- /.消息 -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-messages">
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Doe</strong>
                                    <span class="pull-right text-muted">
                                        <em>Today</em>
                                    </span>
                                </div>
                                <div>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem Ipsum has been the industry's standard dummy text ever since an kwilnw...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem Ipsum has been the industry's standard dummy text ever since the...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>Read All Messages</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-messages -->
                </li>
                <!-- /.列表 -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-tasks">
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 1</strong>
                                        <span class="pull-right text-muted">60% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                            <span class="sr-only">60% Complete (success)</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 2</strong>
                                        <span class="pull-right text-muted">28% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100" style="width: 28%">
                                            <span class="sr-only">28% Complete</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 3</strong>
                                        <span class="pull-right text-muted">60% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                            <span class="sr-only">60% Complete (warning)</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 4</strong>
                                        <span class="pull-right text-muted">85% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%">
                                            <span class="sr-only">85% Complete (danger)</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>See All Tasks</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-tasks -->
                </li>
                <!-- /.提醒 -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-alerts">
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-comment fa-fw"></i> New Comment
                                    <span class="pull-right text-muted small">4 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                    <span class="pull-right text-muted small">12 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-envelope fa-fw"></i> Message Sent
                                    <span class="pull-right text-muted small">4 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-tasks fa-fw"></i> New Task
                                    <span class="pull-right text-muted small">4 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                    <span class="pull-right text-muted small">4 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>See All Alerts</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-alerts -->
                </li>
                <!-- /.登录 -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#"><i class="fa fa-user fa-fw"></i> <%= name %></a>
                        </li>
                        <li><a href="#"><i class="fa fa-gear fa-fw"></i> 设置</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> 退出登录</a>
                        </li>
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
            </ul>
        </nav>
        <!--/. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">
                <li>
                    <a href="/admin"><i class="fa fa-home"></i> 首页</a>
                </li>

                <li>
                    <a  class="active-menu"  href="/table"><i class="fa fa-cogs"></i> 常用工具</a>
                </li>
                <li>
                    <a href="/essay"><i class="fa fa-file"></i>文章数据 </a>
                </li>
                <li>
                    <a href="/users"><i class="fa fa-user"></i>用户管理 </a>
                </li>
                </ul>
            </div>
        </nav>

        <div id="page-wrapper" >
            <div id="page-inner">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-header">
                            常用工具 <small>Common tools</small>
                        </h1>
                        <ol class="breadcrumb">
                            <li><a href="/admin">首页</a></li>
                            <li><a href="/table">常用工具</a></li>
                        </ol>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div  class="panel panel-default">
                            <div class="panel-heading tj">
                                添加
                            </div>
                            <div id="tianjia" class="panel-body">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <form role="form" method="post" action="/addtable" name="addform" enctype="multipart/form-data" onsubmit=" return check(this)">
                                            <div class="form-group col-lg-6">
                                                <label>标签名称</label>
                                                <input class="form-control" placeholder="" name="name">
                                            </div>
                                            <div class="form-group col-lg-6">
                                                <label>标签简介</label>
                                                <input class="form-control" placeholder="" name="jianjie">
                                            </div>
                                            <div class="form-group col-lg-6">
                                                <label>跳转链接</label>
                                                <input class="form-control" placeholder="" name="to_url">
                                            </div>
                                            <div class="form-group col-lg-6">
                                                <label>标签分类</label>
                                                <select class="form-control" name="fenlei">
                                                    <option>----</option>
                                                    <option>生成工具</option>
                                                    <option>解析下载</option>
                                                    <option>影视资源</option>
                                                    <option>有趣好玩</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-lg-6">
                                                <label>选择logo图</label>
                                                <input type="file" name="img_url">
                                            </div>
                                            <div class="form-group col-lg-6">
                                                <button type="submit" class="btn btn-default">提交</button>
                                                <button type="reset" class="btn btn-default">重置</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading xg">
                                修改
                            </div>
                            <div id="xiugai" style="display: none" class="panel-body">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <form role="form" method="post" action="/revise" name="addform" enctype="multipart/form-data" onsubmit=" return check(this)">
                                            <div class="form-group col-lg-6">
                                                <label>标签名称</label>
                                                <input class="form-control" placeholder="" name="name">
                                                <input style="display: none" class="form-control" placeholder="" value="" name="bid">
                                                <input style="display: none" class="form-control" placeholder="" value="" name="yuan_img_url">
                                            </div>
                                            <div class="form-group col-lg-6">
                                                <label>标签简介</label>
                                                <input class="form-control" placeholder="" name="jianjie">
                                            </div>
                                            <div class="form-group col-lg-6">
                                                <label>跳转链接</label>
                                                <input class="form-control" placeholder="" name="to_url">
                                            </div>
                                            <div class="form-group col-lg-6">
                                                <label>标签分类</label>
                                                <select class="form-control" name="fenlei">
                                                    <option>----</option>
                                                    <option>生成工具</option>
                                                    <option>解析下载</option>
                                                    <option>影视资源</option>
                                                    <option>有趣好玩</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-lg-6">
                                                <label>选择logo图</label>
                                                <input type="file" name="img_url">
                                            </div>
                                            <div class="form-group col-lg-6">
                                                <button type="submit" class="btn btn-default">提交</button>
                                                <button type="reset" class="btn btn-default">重置</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                             表单
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table  class=" row-border stripe hover" id="example">
                                    <thead>
                                        <tr>
                                            <th>全选<input style="cursor: pointer" id="selectAll" name="selectAllBtn" type="checkbox"></th>
                                            <th style="display: none">id</th>
                                            <th>名称</th>
                                            <th>简介</th>
                                            <th>logo</th>
                                            <th>链接</th>
                                            <th>分类</th>
                                            <th style="display: none">url</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="alternatecolor">
                                    <% table.forEach(function(value){%>
                                        <tr>
                                            <td class="center"><input style="cursor: pointer" type="checkbox" name=checkboxBtn value="<%=value.bid%>"></td>
                                            <td style="display: none" class="center"><%=value.bid%></td>
                                            <td class="center"><%=value.name%></td>
                                            <td class="center"><%=value.jianjie%></td>
                                            <td class="center"><img style="width: 30%" src="../assets/images/bq_img/<%=value.img_url%>"></td>
                                            <td class="center"><a target="_blank" href="<%=value.to_url%>"><%=value.to_url%></a></td>
                                            <td class="center"><%=value.fenlei%></td>
                                            <td style="display: none" class="center"><%=value.img_url%></td>
                                            <td>
                                                <a href="/deltable?bid=<%=value.bid%>">删除</a>
                                                <a class="bianji" value="编辑" >编辑</a>
                                            </td>
                                        </tr>
                                    <%})%>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
                <footer><p>Copyright © 2023 XiaoLiang. All rights reserved.</p></footer>
            </div>

        </div>
    </div>

    <script type="text/javascript" src="../assets/js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="../assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../assets/js/jquery.metisMenu.js"></script>
    <script type="text/javascript" src="../assets/css/dataTables/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(".tj").click(function(){
            $("#tianjia").slideToggle(800)
        })
        $(".xg").click(function(){
            $("#xiugai").slideToggle(800)
        })

        $("#alternatecolor").on('click','.bianji',function(){
            //获得当前行
            $("#tianjia").slideUp(800);
            $("#xiugai").slideDown(800);
            var currentRow=$(this).closest("tr");
            var bid=currentRow.find("td:eq(1)").text();
            var name=currentRow.find("td:eq(2)").text();
            var jianjie=currentRow.find("td:eq(3)").text();
            var to_url=currentRow.find("td:eq(5)").text();
            var img_url=currentRow.find("td:eq(7)").text();
            $("input[name='bid']").attr("value",bid)
            $("input[name='name']").attr("value",name)
            $("input[name='jianjie']").attr("value",jianjie)
            $("input[name='to_url']").attr("value",to_url)
            $("input[name='yuan_img_url']").attr("value",img_url)
        });
        //表格插件
        $(document).ready(function () {
            $('#example').dataTable({
                "pagingType":   "full_numbers",
                "ordering": false,
                autoWidth: false,
                columnDefs: [
                    {
                        targets:-1,
                        className:'dt-body-center',
                    }
                ],
                columns: [

                    { "width": "8%" },
                    { "width": "0%" },
                    { "width": "15%" },
                    { "width": "22%" },
                    { "width": "15%" },
                    { "width": "20%" },
                    { "width": "10%" },
                    { "width": "0%" },
                    { "width": "10%" }],
                language: {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "oAria": {
                        "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    },
                },
            });
        });
        $("#dataTables-example").css("width","99%");
        //复选框
        function setItemCheckBox(flag) {
            $(":checkbox[name=checkboxBtn]").prop("checked",flag);
        }
        $(function () {
            //点击全选
            $("#selectAll").click(function(){
                //1.获取全选的状态
                var flag = this.checked;//获取全选的状态
                if(flag){
                    $(this).prop("checked", true);
                }else{
                    $(this).prop("checked", false);
                }
                setItemCheckBox(flag);
            });
            //给所有复选框添加事件
            $(":checkbox[name=checkboxBtn]").click(function(){
                var flagV = this.checked;
                if(flagV){
                    $(this).prop("checked", true);
                }else{
                    $(this).prop("checked", false);
                }
                //获取所有复选框的个数
                var len = $(":checkbox[name=checkboxBtn]").length;
                //获取所有被选中的复选框的个数
                var checked_len = $(":checkbox[name=checkboxBtn]:checked").length;
                if(len == checked_len){
                    //alert("全选中了");
                    $("#selectAll").prop("checked",true);
                } else if(checked_len == 0) {
                    $("#selectAll").prop("checked",false);
                } else {
                    $("#selectAll").prop("checked",false);
                }
            });
        });
        function check(form) {
            if (document.addform.name.value==''){
                alert('请输入标签名称！')
                return false
            }
            if (document.addform.jianjie.value==''){
                alert('请输入标签简介！')
                return false
            }
            if (document.addform.img_url.value==''){
                alert('请选择logo图！')
                return false
            }
            if (document.addform.to_url.value==''){
                alert('请输入跳转链接！')
                return false
            }
            if (document.addform.fenlei.value==''){
                alert('请选择标签分类！')
                return false
            }
        }
        // //全选删除
        // function delAll(){
        //     var mid=[]
        //     $("input[name=checkboxBtn]").each(function (i,d){
        //         if(d.checked) {
        //             mid.push(d.value);
        //         }
        //     })
        //     if(mid.length<1){
        //         alert("还没有选中一个哦！");
        //     }
        //     else if (confirm('确定全部删除吗?QAQ')) {
        //         $.ajax({
        //             url:'/delAllMusic',
        //             type:'post',
        //             data:{mid:mid},
        //             dataType:'json',
        //             traditional:true,
        //             success:function (data) {
        //                 var err_code=data.err_code
        //                 if (err_code==0){
        //                     window.location.href='/table'
        //                     alert('删除所选成功！')
        //                 }
        //             }
        //         })
        //     }
        //     return false
        // }

    </script>
    <script type="text/javascript" src="../assets/js/custom-scripts.js"></script>

</body>
</html>
